<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="max-age=604800"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Bootstrap-ecommerce by Vosidiy">

    <title>确认订单</title>

    <link href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon">

    <!-- jQuery -->
    <script src="/js/jquery-2.0.0.min.js" type="text/javascript"></script>

    <!-- Bootstrap4 files-->
    <script src="/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- Font awesome 5 -->
    <link href="/fonts/fontawesome/css/fontawesome-all.min.css" type="text/css" rel="stylesheet">

    <!-- custom style -->
    <link href="/css/ui.css" rel="stylesheet" type="text/css"/>
    <link href="/css/responsive.css" rel="stylesheet" media="only screen and (max-width: 1200px)"/>
    <link href="/css/footerAdjust.css" rel="stylesheet"/>

    <!-- custom javascript -->
    <script src="/js/script.js" type="text/javascript"></script>

    <script type="text/javascript">
        /// some script

        // jquery ready start
        $(document).ready(function () {
            // jQuery code

        });
        // jquery end
    </script>

    <style>
        .myInput{
            border-color:rgba(0, 0, 0, 0.125);
        }
    </style>
</head>
<body>
<div th:replace="fragment::header"></div>


<!-- ========================= SECTION CONTENT ========================= -->
<section class="main-content section-content bg padding-y border-top">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-danger" role="alert">
                    请仔细核对您选购的商品与收货地址信息，下单以后将无法更改！
                </div>
            </div>
        </div>

        <div class="row">
            <main class="col-sm-9">

                <div class="card">
                    <table class="table table-hover shopping-cart-wrap">
                        <thead class="text-muted">
                        <tr>
                            <th scope="col">商品</th>
                            <th scope="col" width="120">数量</th>
                            <th scope="col" width="120">总价</th>
                            <th scope="col" class="text-right" width="200">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="commodity,comStat:${commodityList}">
                            <td>
                                <figure class="media">
                                    <div class="img-wrap"><img th:src="${commodity.commHeadImage}" class="img-thumbnail img-sm">
                                    </div>
                                    <figcaption class="media-body">
                                        <h6 style="white-space: normal" class="title text-truncate" th:text="${commodity.commName}" >Product name goes here </h6>
                                        <dl class="dlist-inline small">
                                            <dt>型号：</dt>
                                            <dd th:text="${commodity.commVersion}">XXL</dd>
                                        </dl>
                                    </figcaption>
                                </figure>
                            </td>
                            <td>
                                <span class="h5" th:text="${shoppingCartItemList[comStat.index].commQuantity}">1</span>
                            </td>
                            <td>
                                <div class="price-wrap">
                                    <var class="price" th:text="'￥'+${#numbers.formatDecimal(priceList[comStat.index],0,2)}">USD 145</var>
                                    <small class="text-muted"th:text="'单价：￥'+${#numbers.formatDecimal(commodity.commPrice,0,2)}">(USD5 each)</small>
                                </div> <!-- price-wrap .// -->
                            </td>
                            <td class="text-right">
                                <a th:href="'/commodity/Details/'+${commodity.commUid}" class="btn btn-outline-warning"> 查看商品详情 </a>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div> <!-- card.// -->

            </main> <!-- col.// -->
            <aside class="col-sm-3">
                <div class="alert alert-success">
                    <dl class=" h4">
                        <dt>订单总价格:</dt>
                        <dd class="text-right " th:text="'￥'+${#numbers.formatDecimal(cartTotalPrice,0,2)}"><strong>USD 1,650</strong></dd>
                    </dl>
                </div>
                <form action="/orderConfirm" method="post">
                    <input type="hidden" th:if="${buyNow=='true'}" th:value="${commodityList[0].commUid}" name="commUid">
                <div class="alert alert-warning" style="background-color:#ffffff;border-color: rgba(0, 0, 0, 0.125);">
                    <div class="form-group">
                        <label >收货人姓名：</label>
                        <input type="text" class="myInput form-control" name="recName" th:value="${userInfo.recName}" >
                    </div>
                    <div class="form-group">
                        <label >收货人电话：</label>
                        <input type="text" class="myInput form-control" name="recPhone" th:value="${userInfo.recPhone}">
                    </div>
                    <div class="form-group">
                        <label >收货地址：</label>
                        <textarea rows="3" class="myInput form-control" name="recAddress" th:text="${userInfo.recAddress}"></textarea>
                    </div>
                </div>
                    <a th:unless="${buyNow=='true'}" href="/shoppingCart" class="btn btn-outline-warning btn-block btn-lg">返回购物车</a>
                    <a th:if="${buyNow=='true'}" th:href="'/commodity/Details/'+${commodityList[0].commUid}" class="btn btn-outline-warning btn-block btn-lg">返回商品详情页</a>
                    <button type="submit" class="btn btn-success btn-block btn-lg">提交订单</button>
                </form>
            </aside> <!-- col.// -->
        </div>
    </div> <!-- container .//  -->
</section>
<!-- ========================= SECTION CONTENT END// ========================= -->


<!-- ========================= FOOTER ========================= -->
<div th:replace="fragment::footer"></div>
<!-- ========================= FOOTER END // ========================= -->


</body>
</html>